<template>
  <div class="registClass">
    <el-form class="login-form" ref="formRef" :model="form" :rules="rules" label-width="100px">
      <h3>用户注册</h3>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" />
        <el-alert v-if="form.id == -1" title="默认初始密码：123456" :closable="false" style="line-height: 10px" type="success"> </el-alert>
      </el-form-item>

      <el-form-item label="教师/学生" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :label="0">教师</el-radio>
          <el-radio :label="1">学生</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="姓名" prop="nickname">
        <el-input v-model="form.nickname" />
      </el-form-item>

      <el-form-item label="手机号" prop="phonenumber">
        <el-input v-model="form.phonenumber" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" :rows="4" />
      </el-form-item>

      <el-form-item>
        <span class="dialog-footer">
          <el-button type="danger" @click="handleConfirm">确认</el-button>
          <el-button @click="handleClose">取消</el-button>
        </span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { defineEmits, defineProps, ref, watch } from "vue";
import requestUtil, { getServerUrl } from "@/utils/request";
import { ElMessage } from "element-plus";
import router from "@/router";
import store from "@/store";

const tableData = ref([]);

const emits = defineEmits(["update:modelValue", "initUserList"]);

const formRef = ref(null);
const form = ref({
  id: -1,
  username: "",
  nickname: "",
  password: "123456",
  status: "0",
  phonenumber: "",
  email: "",
  remark: "",
  type: 0,
  isParty: false, // 1==党员
});

const rules = ref({
  username: [
    { required: true, message: "请输入账号" },
    { required: true, trigger: "blur" },
  ],
  isParty: [
    { required: true, message: "请选择是否党员" },
    { required: true, trigger: "blur" },
  ],
  type: [
    { required: true, message: "请选择是教师或学生" },
    { required: true, trigger: "blur" },
  ],
  nickname: [
    { required: true, message: "请输入姓名" },
    { required: true, trigger: "blur" },
  ],
  email: [
    { required: true, message: "邮箱地址不能为空", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
  ],
  phonenumber: [
    { required: true, message: "手机号码不能为空", trigger: "blur" },
    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" },
  ],
});

function handleClose() {
  store.commit("SET_CHNAGE_LOGIN");
}

const handleConfirm = () => {
  let data = {
    username: form.value.username,
    password: form.value.password,
  };
  emits("setRest", data);

  formRef.value.validate(async (valid) => {
    if (valid) {
      let result = await requestUtil.post("sys/user/save", form.value);
      let data = result.data;
      if (data.code == 200) {
        ElMessage.success("注册成功！");
        formRef.value.resetFields();
      } else {
        ElMessage.error(data.msg);
      }
    }
  });
};

const setRest = () => {
  // 登录
  this.$emit("setRest");
};
</script>

<style lang="scss" scoped>
.registClass {
  width: 600px;
  .login-form {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    flex-direction: column;
    // align-items: center;

    h3 {
      font-size: 17px;
      text-align: center;
      margin-bottom: 30px;
    }
    // position: absolute;
    // right: 10%;
    border-radius: 6px;
    background: rgba(238, 220, 219, 0.3);
    box-shadow: 3px 3px 10px rgb(51, 76, 66, 0.3);
    width: 500px;
    // padding: 25px 35px 5px 25px;
    padding: 40px;
    padding-right: 100px;

    .el-input {
      height: 40px;

      input {
        display: inline-block;
        height: 40px;
        background-color: #707070;
      }
    }
    .dialog-footer {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 0px;
    }
  }
}
</style>
